<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型高级</title>
    <style>
        .fu {
            background-color: lightgreen;
            overflow: hidden;
        }

        .fu > div {
            width: 100px;
            height: 100px;
            border: 3px solid green;
        }

        .z1 {
            /*1.1首个子元素的上外间距会超出父元素的范围，与父元素的顶部贴边显示*/
            margin-top: 50px;
            margin-bottom: 100px;
        }
        .z2 {
            /*2.相邻兄弟在垂直方向的外间距不会相加，取最大值显示*/
            margin-top: 50px;
        }
        .z3 {
            /*1.2 最后1个子元素的下外间距会超出父元素的范围，与父元素的底部贴边显示*/
            margin-bottom: 50px;
        }
        .z4 {
            /*margin-left: 100px;*/
            /*margin: 10px; 四个方向*/
            /*margin: 10px 20px; 上下 左右*/
            /*margin: 10px 20px 30px; 上 右左 下*/
            /*margin: 10px 20px 30px 40px;上 右 下 左*/
            /*块级元素水平居中 auto自动 浏览器自动把左右外间距计算成相等的值，实现居中*/
            margin:0 auto;
        }
    </style>
</head>
<body>
<div class="fu">
    <div class="z1"></div>
    <div class="z2"></div>
    <div class="z3"></div>
    <div class="z4"></div>
</div>
</body>
</html>